// 二次封装的uni-fab按钮
<template>
  <!-- 浮动按钮 -->
  <uni-fab
    :pattern="pattern"
    :content="content"
    :horizontal="horizontal"
    :vertical="vertical"
    :direction="direction"
    @trigger="fabTrigger"
  ></uni-fab>
</template>

<script>
import uniFab from "@/components/uni-ui/uni-fab/uni-fab";
const BACK_STR = "back";
export default {
  components: {
    uniFab,
  },
  data() {
    return {
      horizontal: "right",
      vertical: "bottom",
      direction: "vertical",
      popMenu: true,
      pattern: {
        color: "#666666",
        selectedColor: "#FF3F54",
        backgroundColor: "#ffffff",
        buttonColor: "#FF3F54",
      },
      content: [
        {
          iconPath: require("./images/home_icon.png"),
          text: "首页",
          routerName: "index", // 跳转地址 必填
        },
        {
          iconPath: require("./images/mine_icon.png"),
          text: "我的",
          routerName: "mine", // 跳转地址 必填
        },
        {
          iconPath: require("./images/back_icon.png"),
          text: "返回",
          routerName: BACK_STR, // 跳转地址 必填
        },
      ],
    };
  },
  methods: {
    fabTrigger(data) {
      if (data.item.routerName === BACK_STR) {
        this.$Router.back();
      } else {
        this.$Router.pushTab({ name: data.item.routerName });
      }
    },
  },
};
</script>
